<template>
      <div>
     <div class="title-container">合同信息<span class="title-icon">▲</span></div>
         <div class="sp-from-box">
          <el-form
           :model="ruleForm"
           :rules="rules"
           label-width="115px"
            class="demo-ruleForm"
      >
      <div class="sp-from-cont">
      <div class="sp-from-cont-cloumm">
         <el-form-item label="投保单号码：">
         <el-input
         v-model="ruleForm.name"
         placeholder="自动生成"
         disabled
       ></el-input>
      </el-form-item>
      </div>
       <div class="sp-from-cont-cloumm">
            <el-form-item label="印刷号码">
           <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
           </el-form-item>
       </div>
        <div class="sp-from-cont-cloumm">
          <el-form-item label="管理机构">
                <el-select
                    v-model="queryParams.region"
                    placeholder="请选择"
                    clearable
                    size="small"
                    >
                    <el-option label="86-总公司" value="86"/>
                </el-select>
      </el-form-item>
      </div>
     </div>
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="业务线：">
              <el-select v-model="ruleForm.region" placeholder="请选择">
                <el-option label="01-团险业务" value="shanghai"></el-option>
                <el-option label="02-个人销售" value="beijing"></el-option>
                 <el-option label="03-银行代理" value="shanghai"></el-option>
                <el-option label="05-新业务渠道" value="beijing"></el-option>
               
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="销售渠道：">
              <el-select v-model="ruleForm.region" placeholder="请选择">
                <el-option label="02-个人营销" value="shanghai"></el-option>
                <el-option label="05-中介代理" value="beijing"></el-option>
                 <el-option label="09-银保通销售" value="shanghai"></el-option>
                <el-option label="12-手机银行" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="代理机构：">
              <el-select v-model="ruleForm.region" placeholder="请选择">
                <el-option label="选项一" value="shanghai"></el-option>
                <el-option label="选项二" value="beijing"></el-option>
                 <el-option label="选项三" value="shanghai"></el-option>
                <el-option label="选项四" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="银行柜员：">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="转保标志：">
              <el-select v-model="ruleForm.region" placeholder="请选择">
                <el-option label="选项一" value="shanghai"></el-option>
                <el-option label="选项二" value="beijing"></el-option>
                 <el-option label="选项三" value="shanghai"></el-option>
                <el-option label="选项四" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="转保原印刷号：">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="是否传真件：">
              <el-select v-model="ruleForm.region" placeholder="请选择">
                <el-option label="是" value="shanghai"></el-option>
                <el-option label="否" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="预录单标志：">
              <el-select v-model="ruleForm.region" placeholder="请选择">
                <el-option label="是" value="shanghai"></el-option>
                <el-option label="否" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="预录单签约日期:">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.date1"
                style="width: 100%"
                format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="sp-cont-dialog">
      <div class="sp-cont-dialog-name">
        <span>代理人信息</span>
      </div>
      <div class="sp-cont-dialog-add_a" @click="dialogVisible = true">
        <div class="sp-cont-dialog-add_aicon"><span>+</span></div>
        <div class="sp-cont-dialog-add_aname">
          <span>添加代理人</span>
        </div>
      </div>
      <div></div>
      <div></div>
      <div class="sp-cont-dialog-icon">^</div>
    </div>
    <div class="sp-cont-tablepage">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ background: '#cccccc' }"
      >
        <el-table-column label="序号" type="index" width="50" align="center">
        </el-table-column>
        <el-table-column prop="date1" label="代理人编码" align="center">
        </el-table-column>
        <el-table-column prop="date2" label="代理人姓名" align="center">
        </el-table-column>
        <el-table-column prop="date3" label="代理人组别" align="center">
        </el-table-column>
        <el-table-column prop="date4" label="代理人联系电话" align="center">
        </el-table-column>
        <el-table-column prop="date5" label="是否主服务人" align="center">
        </el-table-column>
        <el-table-column prop="date6" label="佣金比例" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div class="sp-operation">
              <div @click="edit(scope.row)">
                <span>修改</span>
              </div>
              <div @click="deleter(scope.row)">
                <span>删除</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="sp-cont-table-title">
      <div class="sp-table-title_le">
        <span>投保单相关信息</span>
      </div>
      <div class="sp-table-title_ri">^</div>
    </div>
    <div class="sp-from-box">
      <el-form
        :model="ruleForm"
        :rules="rules"
        label-width="115px"
        class="demo-ruleForm"
      >
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="服务提醒方式一：">
              <el-select v-model="ruleForm.region" placeholder="请选择">
                 <el-option label="01-手机短信" value="shanghai"></el-option>
                <el-option label="02-电子邮箱" value="beijing"></el-option>
                 <el-option label="03-信筏" value="shanghai"></el-option>
                <el-option label="04-电话" value="beijing"></el-option>
               
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="服务提醒方式二：">
              <el-select v-model="ruleForm.region" placeholder="请选择">
             <el-option label="01-手机短信" value="shanghai"></el-option>
                <el-option label="02-电子邮箱" value="beijing"></el-option>
                 <el-option label="03-信筏" value="shanghai"></el-option>
                <el-option label="04-电话" value="beijing"></el-option>
               
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="保单申请日期：">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.date1"
                style="width: 100%"
                format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </div>
        </div>
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="首期交费渠道：">
              <el-select v-model="ruleForm.region" placeholder="请选择">
                <el-option label="1-人工收取" value="shanghai"></el-option>
                <el-option label="4-转账" value="beijing"></el-option>
                <el-option label="7-汇款" value="shanghai"></el-option>
                
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="投保人授权转账开户行(局">
              <el-select v-model="ruleForm.region" placeholder="请选择">
                <el-option label="01-中国工商银行" value="shanghai"></el-option>
                <el-option label="02-中国农业银行" value="beijing"></el-option>
                <el-option label="03-中国银行" value="shanghai"></el-option>
                <el-option label="04-中国建设银行" value="beijing"></el-option>
                 <el-option label="04-中国招商银行" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="账号：">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="续期交费渠道：">
              <el-select v-model="ruleForm.region" placeholder="请选择">
                <el-option label="1-人工收取" value="shanghai"></el-option>
                <el-option label="4-转账" value="beijing"></el-option>
                <el-option label="7-汇款" value="shanghai"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="续期转账账户是否等同于首期">
              <el-select v-model="ruleForm.region" placeholder="请选择">
                <el-option label="是" value="shanghai"></el-option>
                <el-option label="否" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="溢交保费处理：">
              <el-select v-model="ruleForm.region" placeholder="请选择">
                <el-option label="01-颓废" value="shanghai"></el-option>
                <el-option label="02-低交续期保费" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="自动垫交标志：">
              <el-select v-model="ruleForm.region" placeholder="请选择">
                <el-option label="是" value="shanghai"></el-option>
                <el-option label="否" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="保全内部划转：">
              <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox label="是" name="type">是</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm"></div>
        </div>
      </el-form>
    </div>
    <div class="sp-flooter">
      <div class="sp-flooter_le">
        <div class="sp-flooter_le-bton">
          <div class="sp-flooter-bton_cloumm">
            <div class="sp-flooter_botten">
              <span>问题件录入</span>
            </div>
          </div>
          <div class="sp-flooter-bton_cloumm">
            <div class="sp-flooter_botten">
              <span>重新扫描</span>
            </div>
          </div>
          <div class="sp-flooter-bton_cloumm">
            <div class="sp-flooter_botten">
              <span>错误字段标记</span>
            </div>
          </div>
        </div>
      </div>
      <div class="sp-flooter_ri">
        <div class="sp-flooter_ri-bton">
          <div class="sp-flooter_ri-margin">
            <div class="sp-flooter_botten bottenMargin">
              <span>修改</span>
            </div>
            <div class="sp-flooter_botten bottenMargin" @click="tonext()">
              <span>下一步</span>
            </div>
          </div>
          <div>
            <div class="sp-flooter_botten bottenMargin">
              <span>可疑交易录入</span>
            </div>
            <div class="sp-flooter_botten bottenMargin">
              <span>未通过的投保规则查询</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
    };
  },
  methods: {
    tonext() {
      this.$emit('tonext','index0');
    },
    tabData(val) {
      this.dialogVisible = false;
      this.tableData.push(val);
    },
    edit(e) {},
    deleter(e) {},
    typename() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped>
</style>